<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
    <title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 12);
	// 创建标注对象并添加到地图
    var myIcon = new BMapGL.Icon("https://www.youbaobao.xyz/datav-res/datav/location.png",
        new BMapGL.Size(60, 60), {
            anchor: new BMapGL.Size(30, 30),// 大小
            imageOffset: new BMapGL.Size(0, 0) // 相对于中心点的位置
        }
    );
    var marker = new BMapGL.Marker(point, {icon: myIcon});
    marker.addEventListener("click", function () {
        var opts = {
            width: 250,     // 信息窗口宽度
            height: 100,    // 信息窗口高度
            title: "标题",  // 信息窗口标题
        }
        var infoWindow = new BMapGL.InfoWindow("内容", opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point);        // 打开信息窗口
    });
    map.addOverlay(marker);

	// 创建标注对象并添加到地图
    var polyline = new BMapGL.Polyline([
        new BMapGL.Point(116.399, 39.800),
        new BMapGL.Point(116.405, 39.810),
        new BMapGL.Point(116.425, 39.820)
    ], {
        strokeColor: "red",
        strokeWeight: 2,
        strokeOpacity: 0.5
    });
    map.addOverlay(polyline);

    var content = "欢迎学习数据可视化体系课";
    var label = new BMapGL.Label(content, {       // 创建文本标注
        position: point,                          // 设置标注的地理位置
        offset: new BMapGL.Size(200, 20)           // 设置标注的偏移量
    });
    label.setStyle({                              // 设置label的样式
        width: '100px',
        height: '20px',
        padding: '20px',
        color: '#fff',
        fontSize: '20px',
        border: '2px solid #1E90FF',
        background: 'red',
        whiteSpace: 'wrap',
        overflow: 'hidden',
        lineHeight: '20px'
    });
    label.addEventListener('click', function (e) {
        alert(e.target.content);
    });
    map.addOverlay(label);                        // 将标注添加到地图中
</script>
